<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <!--引入富文本编辑器的样式文件-->
  <link href="https://cdn.staticfile.org/wangeditor5/5.1.23/css/style.min.css" rel="stylesheet">
  <style>
    #editor—wrapper {
      border: 1px solid #ccc;

    }
    #toolbar-container { border-bottom: 1px solid #ccc; }
    #editor-container { height: 500px; }
  </style>
</head>
<body>
<div id="app">
  <div id="editor—wrapper">
    <div id="toolbar-container"><!-- 工具栏 --></div>
    <div id="editor-container"><!-- 编辑器 --></div>
  </div>
  <h1>预览效果</h1>
  <div v-html="content"></div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/wangeditor5/5.1.23/index.min.js"></script>
<script>


 let v = new Vue({
    el: '#app',
    data: function() {
      return {
          content:""
      }
    },
   methods:{

   }
  })

 /**********富文本编辑器相关js开始***********/
 const { createEditor, createToolbar } = window.wangEditor
 const editorConfig = {
   placeholder: 'Type here...',
   onChange(editor) {
     const html = editor.getHtml()
     console.log('editor content', html)
     v.content = html;
   }
 }
 const editor = createEditor({
   selector: '#editor-container',
   html: '<p><br></p>',
   config: editorConfig,
   mode: 'simple',
 })
 const toolbarConfig = {}
 const toolbar = createToolbar({
   editor,
   selector: '#toolbar-container',
   config: toolbarConfig,
   mode: 'simple',
 })
 /**********富文本编辑器相关js结束***********/
</script>
</html>